<template>
    <div>
        <section class="content-header">应急准备管理&nbsp;/&nbsp;应急预案&nbsp;/&nbsp;上传预案</section>
        <div class="col-md-12">
            <form class="form-horizontal clearfix">
                <div class="col-md-5 col-md-offset-2">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-4 control-label">分类：</label>
                            <div class="col-sm-8">
                                <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    v-model="form.classify"
                                >
                                    <option value disabled selected style="display:none;">请选择</option>
                                    <option
                                        v-for="lst in classList"
                                        :value="lst.dicValue"
                                        :key="lst.value"
                                    >{{lst.dicSubitem}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-4 control-label">预案标题：</label>
                            <div class="col-sm-8">
                                <input
                                    type="text"
                                    class="form-control"
                                    id
                                    size="20"
                                    placeholder="请输入事件名称"
                                    v-model="form.plan"
                                >
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">适用事件类型：</label>
                            <div class="col-sm-8">
                                <select
                                    class="form-control select2"
                                    style="width: 100%;"
                                    v-model="form.type"
                                >
                                    <option value disabled selected style="display:none;">请选择</option>
                                    <option
                                        v-for="lst in typeList"
                                        :value="lst.dicValue"
                                        :key="lst.value"
                                    >{{lst.dicSubitem}}</option>
                                </select>
                            </div>
                        </div>
                        <dept v-model="form.deptid"/>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">备注：</label>
                            <div class="col-sm-8">
                                <textarea
                                    class="form-control"
                                    rows="4"
                                    placeholder="请输入事件描述"
                                    maxlength="80"
                                    v-model="form.remarks"
                                ></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4 control-label">
                                <i
                                    class="fa fa-cloud-upload"
                                    aria-hidden="true"
                                    style="font-size:40px"
                                ></i>
                            </label>
                            <div class="col-md-8">
                                <div style="display:none">
                                    <input type="file" ref="inputfile" @change="changefile($event)">
                                    <!-- :action="uploadUrl" -->
                                </div>
                                <div style="line-height:34px;">
                                    <button
                                        type="button"
                                        class="btn btn-primary"
                                        @click="$refs.inputfile.click()"
                                    >选择文件</button>
                                </div>
                                <div
                                    style="line-height:34px;color:#c6c6c6"
                                >仅支持xlsx.，xls.，pdf.，docx.,doc.，文件大小≤4M。</div>
                                <div v-for="(item,index) in filepath" :key="item.value">
                                    <input
                                        class="form-control"
                                        style="display:inline;width:80%"
                                        :value="item"
                                        placeholder="选择文件"
                                        disabled
                                    >
                                    <i
                                        class="fa fa-trash"
                                        aria-hidden="true"
                                        style="font-size:20px;cursor: pointer;"
                                        @click="deleteFile(index)"
                                    ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2 error"></div>
                <div class="col-md-12">
                    <div class="col-md-3"></div>
                    <div class="col-md-4" style="text-align: center">
                        <button
                            type="button"
                            class="btn btn-primary"
                            style="margin-right:50px"
                            @click="addForm"
                        >上传</button>
                        <button
                            type="button"
                            class="btn btn-default"
                            data-toggle="modal"
                            data-target="#myModal"
                        >取消</button>
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div
                    class="modal fade"
                    id="myModal"
                    tabindex="-1"
                    role="dialog"
                    aria-labelledby="myModalLabel"
                >
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button
                                    type="button"
                                    class="close"
                                    data-dismiss="modal"
                                    aria-label="Close"
                                >
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h4 class="modal-title" id="myModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <p>您编辑的内容尚未保存，确定取消申请吗？</p>
                            </div>
                            <div class="modal-footer">
                                <router-link to="plan">
                                    <button
                                        type="button"
                                        class="btn btn-block btn-info"
                                        data-dismiss="modal"
                                    >确定</button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import dept from "@/components/common/emergency/dept.vue";

export default {
    data() {
        return {
            typeList: [],
            classList: [],
            form: {
                plan: "",
                type: "",
                classify: "",
                deptid: "",
                path: "",
                remarks: ""
            },
            fileList: [],
            file: "",
            filepath: []
        };
    },
    components: {
        dept
    },
    mounted() {
        this.getType();
        this.getClass();
    },
    watch:{
        'fileList'() {
            this.form.path = "";
            this.fileList.forEach(item => {
                this.form.path += `${item},`;
            });
            this.form.path = this.form.path.substr(
                0,
                this.form.path.length - 1
            );
            // console.log(this.form.path.substr(0, this.form.path.length - 1));
        }
    },
    methods: {
        //上传文件
        changefile(event) {
            // console.log(event.target.files)
            // console.log(event.target.files[0].name)
            this.file = event.target.files[0];
            let formdata = new FormData();
            formdata.append("file", this.file);
            this.$api.safe.trainFile(formdata).then(res => {
                if (res.success) {
                    // this.form.path = res.data;
                    this.fileList.push(res.data);
                    this.filepath.push(event.target.files[0].name);
                    // console.log(this.fileList);
                }
            });
        },
        deleteFile(index){
            this.fileList.splice(index,1)
            this.filepath.splice(index,1)
            console.log(this.fileList);
            console.log(this.filepath);
        },
        //预案类型列表
        getType() {
            this.$api.zhunbei.planTypes().then(res => {
                if (res.success) {
                    this.typeList = res.data;
                }
            });
        },
        //预案分类列表
        getClass() {
            this.$api.zhunbei.playClassifys().then(res => {
                if (res.success) {
                    this.classList = res.data;
                }
            });
        },
        //添加
        addForm() {
            // console.log(this.form)
            this.$api.zhunbei.addPlan(this.form).then(res => {
                if (res.success) {
                    this.$$message({
                        message: "恭喜您，添加成功！",
                        type: "success"
                    });
                    this.$router.push({ path: "plan" });
                }
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.control-label {
    padding: 0px !important;
    line-height: 34px;
    text-align: right;
}
</style>
